<template>
    <div style="display: flex; justify-content: center; background-color: #fff;">
        <div style="width: 755px">
            <div style="width: 755px;">
                <div style="overflow: hidden;">
                    <div class="about-top">
                        <div style="color: #efefef; font-size: 24px;">臻情回馈</div>
                    </div>
                </div>
                <div style="margin-top: 30px;">
                    <span style="font-size: 15px; color: #3498db;">活动进行中</span>
                    <div style="display: grid; grid-template-columns: repeat(3, 1fr);">
                        <div style="cursor: pointer;" v-for="(item, index) in promotionalCategoryData" :key="index">
                            <div style="width: 230px; padding: 10px; margin-top: 10px; box-sizing: border-box; border: 1px solid #3498db;">
                            <div style="text-align: center; font-size: 12px;">
                                <span style="display: block; font-size: 14px;">{{ item.title }}</span>
                            </div>
                            <div style="text-align: center; margin-top: 10px;">
                                <img 
                                :src="item.cover" 
                                alt="" 
                                width="100%" 
                                style="cursor: pointer;" 
                                @click="()=>router.push({path: '/promotion_detail', query: {'id': item.id}})"
                                />
                            </div>
                        </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { listPromotional } from '../requests/index';

const loading = ref(false);
const router = useRouter();
const promotionalCategoryData = ref();
const getPromotionalCategoryData = async () => {
    loading.value = true;
    const res = await listPromotional();
    if (res.status === 2000) {
        promotionalCategoryData.value = res.data;
    } else {
        ElMessage.error("获取列表失败");
    };
    loading.value = false;
};
getPromotionalCategoryData();

</script>

<style scoped>
.about-top{
    width:100%;
    height:100px;
    font-size:14px;
    line-height:100px;
    text-align:center;
    background: linear-gradient(to right, rgb(78, 205, 196), rgb(85, 98, 112));
    border-radius: 5px;
    background-size:100% 100%;
    margin-bottom: 20px;
    padding:3px 0 ; 
}
</style>